* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  line-height: 1.5;
  color: #606266;
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
li {
  list-style-type: none;
}
a {
  text-decoration: none;
}
// 导入global.scss
@import 'global';

// #region flex布局公共区
.dis-flex {
  display: flex;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-dir-row {
  flex-direction: row;
}

.flex-dir-column {
  flex-direction: column;
}

.flex-x-center {
  justify-content: center;
}

.flex-x-between {
  justify-content: space-between;
}

.flex-x-around {
  justify-content: space-around;
}

.flex-x-end {
  justify-content: flex-end;
}

.flex-y-start {
  align-items: flex-start;
}

.flex-y-center {
  align-items: center;
}

.flex-y-end {
  align-items: flex-end;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
// #endregion
// #region 滚动条
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #ccc9c7;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(50, 50, 50, 0.5);
}

::-webkit-scrollbar-track {
  background-color: rgba(50, 50, 50, 0.05);
}
// #endregion
#app {
  @for $i from 1 through 12 {
    .flex-#{$i} {
      flex: $i;
    }
    @if $i < 11 {
      .w-#{$i * 10} {
        width: percentage(calc($i / 10));
      }
      .h-#{$i * 10} {
        height: percentage(calc($i / 10));
      }
    }
    .width-#{$i * 20} {
      width: $i * 20 + px;
    }
    .width-#{$i * 10} {
      width: $i * 10 + px;
    }
  }
  @for $i from 5 through 50 {
    .f-#{$i} {
      font-size: $i + px;
    }
    @if $i % 5 == 0 {
      .m-#{$i} {
        margin: $i + px;
      }
      .mt-#{$i} {
        margin-top: $i + px;
      }
      .mr-#{$i} {
        margin-right: $i + px;
      }
      .mb-#{$i} {
        margin-bottom: $i + px;
      }
      .ml-#{$i} {
        margin-left: $i + px;
      }
      .p-#{$i} {
        padding: $i + px;
      }
      .pt-#{$i} {
        padding-top: $i + px;
      }
      .pr-#{$i} {
        padding-right: $i + px;
      }
      .pb-#{$i} {
        padding-bottom: $i + px;
      }
      .pl-#{$i} {
        padding-left: $i + px;
      }
    }
  }
}
